//@ts-ignore
import {
  createComponentStyleSchema,
  createDecoratorStyleSchema,
  createEmptySchema,
  createInbizSchema,
} from '@inbiz/setters';
import { PopupMenu as LocaleInbizMenu } from './locale';

export const propsSchema = createInbizSchema({
  attribute: {
    ...createEmptySchema({
      titleOption: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'StatusInput',
      },
      iconOption: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'IconPicker',
      },
      textColor: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'ColorInput',
      },
      bgColor: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'ColorInput',
      },
      fontSize: {
        type: 'string',
        'x-decorator': 'FormItem',
        'x-component': 'NumberPicker',
        'x-component-props': {
          min: 12,
        },
      },
      // fill: {
      //   type: 'string',
      //   enum: [
      //     {
      //       label: 'solid',
      //       value: 'solid',
      //     },
      //     {
      //       label: 'none',
      //       value: 'none',
      //     },
      //   ],
      //   'x-decorator': 'FormItem',
      //   'x-component': 'Select',
      // },
      position: {
        type: 'string',
        enum: ['left', 'right'],
        'x-decorator': 'FormItem',
        'x-component': 'Select',
      },
    }),
  },
  style: {
    ...createComponentStyleSchema(),
    ...createDecoratorStyleSchema(),
  },
});

export const defaultProps = {
  titleOption: {
    value: 'PopupMenu.title',
    status: true,
  },
  iconOption: {
    type: 'icon-a-ic-zhankai1',
    color: 'rgba(0,0,0,1)',
    size: 16,
  },
  bgColor: 'rgba(255,255,255,1)',
  textColor: 'rgba(0,0,0,1)',
  fontSize: 16,
  fill: 'solid',
  position: 'left',
};

export const defaultBehavior = {
  extends: ['Field'],
  name: 'PopupMenu',
  selector: (node: any) => node?.props['x-component'] === 'PopupMenu',
  designerLocales: LocaleInbizMenu,
  designerProps: {
    propsSchema: propsSchema,
  },
};

export const defaultResource = {
  icon: 'PopupMenu',
  elements: [
    {
      componentName: 'Field',
      props: {
        type: 'string',
        'x-decorator': 'Container',
        'x-decorator-props': {
          clickable: false,
        },
        'x-component': 'PopupMenu',
        'x-component-props': defaultProps,
      },
    },
  ],
};
